// 封装柱状图
// 1.功能代码都封装
// 2.可变部分抽象成prop参数

import * as echarts from 'echarts'
import { useEffect, useRef } from 'react';

const BarChart = ({title}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    // 保证dom可用，才进行渲染
    // 基于准备好的dom，初始化echarts实例
    // 原生获取dom方法
    // const myChart = echarts.init(document.getElementById('main'));

    // 使用ref获取dom
    const myChart = echarts.init(chartRef.current);

  // 指定图表的配置项和数据
  const option = {
    title: {
      text: title
    },
    tooltip: {},
    legend: {
      data: ['框架']
    },
    xAxis: {
      data: ['Vue', 'Angular', 'React']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [10, 70, 40]
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  }, [])

  return <div><div ref={chartRef} id='main' style={{width: '500px', height: '400px'}}></div></div>
}

export default BarChart